<template>
  <div class="w-full h-full ">
    <div id="pieChart" class="w-full h-full"></div>
  </div>
</template>

<script setup>
import { onMounted,ref } from 'vue'
import * as echarts from 'echarts';

const props = defineProps({
  service_histogram: Object
})

const xData = ref([])

onMounted(() => {
  xData.value[0] = props.service_histogram.manage_num
  xData.value[1] = props.service_histogram.service_num
  xData.value[2] = props.service_histogram.no_service_count
  init()
})
const init = () => {
  var chartDom = document.getElementById('pieChart');
  var myChart = echarts.init(chartDom);
  var option;

  option = {
    xAxis: {
      data: ['在管人数', '已服务', '未服务'],
      type: 'category',
    },
    yAxis: {
      axisLine: { //x轴线的颜色以及宽度
        show: true,
        lineStyle: {
          color: '#fff',
          width: 0,
          type: 'solid',
        },
      },
    },
    animationDurationUpdate: 500,
    series: [
      {
        data: xData.value,
        type: 'bar'
      }
    ]
  }
  option && myChart.setOption(option);
}
</script>

<style scoped>

</style>
